<template>
  <div class="list-table">
    <div class="area-header">
      <span class="area-header-title">{{ $t('售前周会') }}</span>
    </div>
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item :label="$t('日期(周)')">
        <DatePicker
          v-model="queryParams.date"
          type="week"
          format="yyyy年 第WW周"
          :placeholder="$t('日期(周)')"
        />
        <!-- (MM月-dd号) -->
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="mini" @click="queryHandle">{{ $t("搜索") }}</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">{{ $t("重置") }}</el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      tooltip-effect="darkTable"
      :data="anxinWeeklyList"
      border
    >
      <el-table-column :label="$t('用户名称')" prop="nickName" width="260" />
      <el-table-column :label="$t('创建项目')" prop="createCount">
        <template slot-scope="scope">
          <el-button type="text" @click="dealDetails(scope.row,'create')">{{ scope.row.createCount }}</el-button>
        </template>
      </el-table-column>
      <el-table-column :label="$t('跟踪项目')" prop="trackCount">
        <template slot-scope="scope">
          <el-button type="text" @click="dealDetails(scope.row,'track')">{{ scope.row.trackCount }}</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    <pagination-->
    <!--      v-show="total>0"-->
    <!--      :total="total"-->
    <!--      :page.sync="queryParams.pageNum"-->
    <!--      :limit.sync="queryParams.pageSize"-->
    <!--      @pagination="getList"-->
    <!--    />-->
    <el-dialog
      v-if="formOpen"
      :title="$t('项目跟踪')"
      :visible.sync="formOpen"
      :close-on-click-modal="false"
      :lock-scroll="false"
      append-to-body
    >
      <dealTrackList ref="dealTrackList" :deal-id-prop="dealIdProp" />
    </el-dialog>

    <el-dialog
      :title="$t('项目详情')"
      :visible.sync="dealFormOpen"
      width="70%"
      top="20px"
      :close-on-click-modal="false"
      :lock-scroll="false"
      append-to-body
    >
      <el-table
        v-loading="trackLoading"
        :data="trackInfoList"
        border
        height="700px"
        max-height="700px"
      >
        <el-table-column :label="$t('项目名称')" prop="dealName" width="260" />
        <el-table-column :label="$t('负责人')" prop="nickName" />
        <el-table-column :label="$t('省市')" prop="nickName">
          <template slot-scope="scope">
            {{ address(scope.row) }}
          </template>
        </el-table-column>
        <el-table-column :label="$t('最新跟踪')" prop="createCount" min-width="250">
          <template slot-scope="scope">
            <div v-if="scope.row.track" class="progressTimeLine">
              <div size="mini" class="progressItem" @click="viewTrack(scope.row)">
                <p class="tit">
                  <span class="text">{{ formatText(scope.row.track.details) }}</span>
                </p>
                <el-tag v-if="scope.row.track.itemTypeName" size="mini">{{ scope.row.track.itemTypeName }}</el-tag>
                <el-tag v-if="scope.row.track.trackModeName" type="warning" size="mini">{{ scope.row.track.trackModeName }}</el-tag>
                <div class="bottom">
                  <p v-if="scope.row.track.user" class="peo">{{ scope.row.track.user.nickName }}</p>
                  <p v-if="scope.row.track.happenTime" class="time">{{ parseTime(scope.row.track.happenTime) }}</p>
                </div>
                <div class="bottom">
                  <p v-if="scope.row.track.createTime" class="peo">{{ $t('创建时间') }}</p>
                  <p v-if="scope.row.track.createTime" class="time">{{ parseTime(scope.row.track.createTime) }}</p>
                </div>
              </div>

            </div>
          </template>
        </el-table-column>
        <el-table-column :label="$t('操作')" prop="trackCount" width="120">
          <template slot-scope="scope">
            <el-button
              size="small"
              type="text"
              icon="el-icon-mobile"
              @click="allDealTrack(scope.row)"
            >{{ $t('全部跟踪') }}</el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="trackPojo.total>0"
        :total="trackPojo.total"
        :page.sync="trackParams.pageNum"
        :limit.sync="trackParams.pageSize"
        @pagination="getTrackList"
      />
    </el-dialog>
    <el-dialog
      title="项目跟踪"
      :visible.sync="trackFormOpen"
      :close-on-click-modal="false"
      custom-class="dialogForm"
      :lock-scroll="false"
      append-to-body
    >
      <dealTrackForm ref="dealTrackForm" />
    </el-dialog>
  </div>
</template>

<script>
import { preSaleWeeklyReportList, trackInfoByUser } from '@/api/anxin/weekly/anxinWeekly'
import { downLoadExcel } from '@/utils/excelDownload'
// import { trackInfo } from '@/api/deal/track/dealTrack'
import dealTrackList from '@/views/deal/track/dealTrackList.vue'
import dealTrackForm from '@/views/deal/track/dealTrackForm'

import moment from 'moment'

export default {
  components: {
        dealTrackList,
        dealTrackForm
    },
  data() {
      return {
          // 遮罩层
          loading: true,
          trackLoading: true,
          // 总条数
          total: 0,
          anxinWeeklyList: [],
          // 是否显示弹出层
          formOpen: false,
          dealFormOpen: false,
          trackFormOpen: false,
          // 是否驻场字典
          siteOptions: [],
          // 查询参数
          queryParams: {
              date: undefined,
              startDate: undefined,
              endDate: undefined,
              pageNum: 1,
              pageSize: 10
          },
          // 记录日期范围
          dateRange: [],
          // 表单参数
          form: {},
          trackInfoList: [],
          trackPojo: {
              total: 0
          },
          trackParams: {
              user: undefined,
              type: undefined,
              pageNum: 1,
              pageSize: 10
          },
          dealIdProp: undefined
      }
  },
  created() {
    this.queryParams.date = new Date()
        this.getList()
  },
  methods: {
    /** 查询周报列表 */
    getList() {
        this.loading = true
           if (this.queryParams.date) {
            const weekOfday = moment(this.queryParams.date).format('E')// 计算今天是这周第几天
            const last_monday = moment(this.queryParams.date).subtract(weekOfday - 1, 'days').format('yyyy-MM-DD')// 周一日期
            const last_sunday = moment(this.queryParams.date).subtract(weekOfday - 7, 'days').format('yyyy-MM-DD')// 周日日期
            console.log('this.queryParams', last_monday, last_sunday)
             this.queryParams.startDate = last_monday
             this.queryParams.endDate = last_sunday
          // this.queryParams.yearWeek = this.getWeek(this.queryParams.date)
        }
        // console.log('this.queryParams', this.queryParams)
        preSaleWeeklyReportList(this.queryParams).then(response => {
            this.anxinWeeklyList = response.rows
            this.total = response.total
            this.loading = false
        })
    },
    /** 搜索按钮操作 */
    queryHandle() {
        this.queryParams.pageNum = 1
        this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
        this.resetForm('queryForm')
        this.queryParams = {
              date: new Date(),
              dept: [],
              user: '',
              yearWeek: '',
              type: '',
              pageNum: 1,
              pageSize: 10
          }
          this.getList()
    },

    /** 导出按钮操作 */
    exportHandle() {
      if (this.queryParams.date) {
        this.queryParams.yearWeek = this.getWeek(this.queryParams.date)
      } else {
        this.queryParams.yearWeek = undefined
      }
      downLoadExcel('/weekly/anxinWeekly/export', this.addDateRange(this.queryParams, this.dateRange))
    },
     /** 修改按钮操作 */
    updateHandle(row) {
        this.formOpen = true
        const data = {
          id: row.id,
          yearWeek: row.yearWeek,
          createBy: row.id
        }
        this.$nextTick(() => {
           this.$refs.anxinWeeklyForm.isHideInit('1')
            // 调用form页面的 init 方法初始化数据
            this.$refs.anxinWeeklyForm.init(data)
        })
    },
    // 导出弹出层关闭
    exportCancel() {
      this.exportOpen = false
      this.dateRange = []
      this.resetForm('exportQueryParams')
    },
    // 获取日期d是哪一年的第几周
    getWeek(d) {
      // 截掉时分秒保留整数天
      var date = new Date((d || new Date()))
      // 设置日期为当前周周四
      date.setDate(date.getDate() + (4 - (date.getDay() || 7)))
      var year = date.getFullYear()

      var firstDate = new Date(year, 0, 1)

      firstDate.setDate(firstDate.getDate() + (4 - (firstDate.getDay() || 7)))
      // 当年第一天早于周四第一周延后七天
      if (firstDate.getFullYear() < year) {
        firstDate.setDate(firstDate.getDate() + 7)
      }
      // 计算当前周和第一周之间周数差
      var week = Math.ceil(((date - firstDate) / 86400000 + 1) / 7)
      return year + '' + ('0' + week).substr(-2)
    },
    getWeekStr(d) {
      var date = new Date((d || new Date()))
        // 设置日期为当前周周四
        date.setDate(date.getDate() + (4 - (date.getDay() || 7)))
        var year = date.getFullYear()
        var firstDate = new Date(year, 0, 1)

      firstDate.setDate(firstDate.getDate() + (4 - (firstDate.getDay() || 7)))
      // 当年第一天早于周四第一周延后七天
      if (firstDate.getFullYear() < year) {
        firstDate.setDate(firstDate.getDate() + 7)
      }
       // 计算当前周和第一周之间周数差
      var week = Math.ceil(((date - firstDate) / 86400000 + 1) / 7)
        return year + '年第' + week + '周'
    },
    dealDetails(row, type) {
        this.dealFormOpen = true
        this.trackParams.user = row.userId
        this.trackParams.type = type
        const weekOfday = moment(this.queryParams.date).format('E')// 计算今天是这周第几天
        const last_monday = moment(this.queryParams.date).subtract(weekOfday - 1, 'days').format('yyyy-MM-DD')// 周一日期
        const last_sunday = moment(this.queryParams.date).subtract(weekOfday - 7, 'days').format('yyyy-MM-DD')// 周日日期
        this.trackParams.startDate = last_monday
        this.trackParams.endDate = last_sunday
        trackInfoByUser(this.trackParams).then(response => {
        this.trackInfoList = response.rows
        this.trackPojo.total = response.total
        this.trackLoading = false
      })
    },
    allDealTrack(row) {
      this.dealIdProp = row.dealId
       this.formOpen = true
       this.$nextTick(() => {
            this.$refs.dealTrackList.getList()
        })
    },
    getTrackList() {
      this.trackLoading = true
     trackInfoByUser(this.trackParams).then(response => {
        this.trackInfoList = response.rows
        this.trackPojo.total = response.total
        this.trackLoading = false
      })
    },
     formatText(htmlStr) {
      if (!htmlStr) return ''
      return htmlStr.replace(/<\/?.+?>/g, '').replace(/ /g, '')
    },
    viewTrack(item) {
      this.trackFormOpen = true
      this.$nextTick(() => {
        // 调用form页面的 init 方法初始化数据
        this.$refs.dealTrackForm.init(item)
      })
    },
    address(row) {
        if (row.province && row.city) {
          return row.province + '-' + row.city
        }
       return ''
    }
  }
}
</script>
<style lang="scss" scoped >
.text{
  /* autoprefixer: off */
  display:-webkit-box;
  -webkit-line-clamp: 2;
  overflow: hidden;
  -webkit-box-orient: vertical;
  text-overflow: ellipsis;
  /* autoprefixer: on */
  max-height: 50px
}
</style>
